<template>
  <div>
    <el-card>
      <el-form class="search-form" style="margin-top: 20px">
        <el-form-item label-width="100px" label="分类:" size="default">
          <el-select style="width: 100%" v-model="category" placeholder="请选择类型" clearable>
            <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="团购:" size="default">
          <el-select style="width: 100%" v-model="isGroup" placeholder="是否团购" clearable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="品牌:" size="default">
          <el-input v-model="brandName" placeholder="请输入品牌名" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="商品名:" size="default">
          <el-input v-model="productName" placeholder="请输入商品名" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="all-search">
        <el-button type="primary" size="mini" class="btn-background-color-search" @click="queryBtn">
          查询
        </el-button>
        <el-button type="primary" size="mini" class="btn-background-color-reset" @click="reset">重置
        </el-button>
      </div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(url, index) in urls" :key="index">
          <el-image :src=url style="object-fit: cover;" />
        </el-carousel-item>
      </el-carousel>
    </el-card>
    <div class="productStyle">
      <el-card class="custom-card" v-for="(item,index) in dataList">
        <el-image style="height: 170px;width: 100%;" :src='item.picUrl'/>
        <br>
        <div style="height: 30px;">
          <span style="color: #333030;font-size: 15px">{{ item.brandName }}-{{ item.productName }}</span><br>
        </div>
        <span style="color: #dc1010;font-size: 30px">￥{{ item.price }}</span>&nbsp;<br>
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-icon v-if="item.isGroup == 1" color="#f80317" size="20">
            <Stamp/>
          </el-icon>&nbsp;
          <el-button-group class="ml-4">
            <el-button color="#06f4d4" size="small" type="primary" :icon="Share" @click="productDetails(item)">详情
            </el-button>
            <el-button color="#0c59ec" size="small" type="primary" :icon="Star" @click="Addfavorite(item)" >收藏</el-button>
            <el-button color="#ea0797" size="small" type="primary" :icon="ShoppingCartFull" @click="Addcart(item)"  >购物车</el-button>
          </el-button-group>
        </div>
      </el-card>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px">
      <p v-if="loading">
        <el-icon color="blue">
          <Loading/>
        </el-icon>
      </p>
      <el-button :icon="Loading" type="primary" plain v-if="!loading" @click="load">展示更多</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {Loading, Star, Share, ShoppingCartFull} from '@element-plus/icons-vue'
import {ResponseData} from "@/api/user/type";
import {reqProductList} from "@/api/product";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {reqAddFavorite} from "@/api/favorite";
import useUserStore from "@/store/modules/user";
import {reqAddCart} from "@/api/cart";

const router = useRouter();
const productDetails = (item: any) => {
  router.push({
    name: 'productDetails',
    query: {
      row: item.id
    }
  });
}
let UserStore = useUserStore()
const Addfavorite =( async (item: any) =>{
 var res: ResponseData = await  reqAddFavorite({productId:item.id,userId:UserStore.id});
 if(res.code == 0){
   ElMessage.success("收藏成功");
 }else {
   ElMessage.info(res.message);
 }
})
const Addcart = (async (item: any) =>{
  let AddCartRequestData ={
    userId : UserStore.id,
    productId : item.id,
    price : item.price,
    quantity : 1,
    totalPrice : item.price,
  }
  var res : ResponseData = await reqAddCart(AddCartRequestData);
  if(res.code == 0){
    ElMessage.success("已加入购物车");
  }else {
    ElMessage.info(res.message);
  }
})
const dataList = ref([]);
let current = ref(1);
let pageSize = ref(12);
let total = ref(0);
const categoryList = [
  {
    value: '水果',
    label: '水果',
  },
  {
    value: '主食',
    label: '主食',
  },
  {
    value: '零食',
    label: '零食',
  },
  {
    value: '蔬菜',
    label: '蔬菜',
  },
  {
    value: '海鲜',
    label: '海鲜',
  },
  {
    value: '饮料',
    label: '饮料',
  },
  {
    value: '乳制品',
    label: '乳制品',
  },
  {
    value: '肉类',
    label: '肉类',
  },
  {
    value: '调味品',
    label: '调味品',
  },
  {
    value: '冷冻食品',
    label: '冷冻食品',
  },
  {
    value: '糕点',
    label: '糕点',
  },
  {
    value: '罐头食品',
    label: '罐头食品',
  },
  {
    value: '坚果',
    label: '坚果',
  },
  {
    value: '谷物',
    label: '谷物',
  },
  {
    value: '甜品',
    label: '甜品',
  },
  {
    value: '香料',
    label: '香料',
  },
  {
    value: '禽类',
    label: '禽类',
  },
  {
    value: '饮品',
    label: '饮品',
  },
  {
    value: '有机食品',
    label: '有机食品',
  },
  {
    value: '谷类食品',
    label: '谷类食品',
  },
  {
    value: '果酱',
    label: '果酱',
  },
  {
    value: '腌制食品',
    label: '腌制食品',
  },
  {
    value: '巧克力',
    label: '巧克力',
  },
  {
    value: '大豆制品',
    label: '大豆制品',
  },
  {
    value: '酱料',
    label: '酱料',
  },
  {
    value: '甜点',
    label: '甜点',
  },
  {
    value: '谷类食品',
    label: '谷类食品',
  },
  {
    value: '食用油',
    label: '食用油',
  },
  {
    value: '醋',
    label: '醋',
  },
  {
    value: '烘焙食材',
    label: '烘焙食材',
  },
  {
    value: '蘸料',
    label: '蘸料',
  },
  {
    value: '草药',
    label: '草药',
  },
  {
    value: '其他',
    label: '其他',
  }
]

const category = ref("")
const isGroup = ref("")
const brandName = ref("")
const productName = ref("")

const reset = (() => {
  category.value = null;
  isGroup.value = null;
  brandName.value = null;
  productName.value = null;
})
//查询按钮
const queryBtn = (async () => {
  let userQueryRequest =
      {
        userId:UserStore.id,
        current: 1,
        pageSize: 12,
        category: category.value ? category.value : null,
        isGroup: isGroup.value ? Number(isGroup.value) : null,
        brandName: brandName.value ? brandName.value : null,
        productName: productName.value ? productName.value : null
      };
  let res: ResponseData = await reqProductList(userQueryRequest);
  let data = res.data;
  if (res.data.records) {
    dataList.value = data.records;
    total.value = Number(data.total);
    current.value = Number(data.current);
    pageSize.value = Number(data.size);
  } else {
    ElMessage.error("请求数据为空...");
  }
})

const loading = ref(false)
let loadingData = ref(false)
const load = (() => {
  if (!loadingData.value) {
    loadingData.value = true;
    loading.value = true;
    setTimeout(async () => {
      let userQueryRequest =
          {
            userId:UserStore.id,
            current: current.value ? Number(current.value) + 1 : null,
            pageSize: pageSize.value ? Number(pageSize.value) : null,
            category: category.value ? category.value : null,
            isGroup: isGroup.value ? Number(isGroup.value) : null,
            brandName: brandName.value ? brandName.value : null,
            productName: productName.value ? productName.value : null
          };
      let res: ResponseData = await reqProductList(userQueryRequest);
      let data = res.data;
      if (res.data.records) {
        total.value = Number(data.total);
        current.value = Number(data.current);
        pageSize.value = Number(data.size);
        dataList.value = dataList.value.concat(res.data.records);
      } else {
        ElMessage.error("请求数据为空...");
      }
      loading.value = false;
      loadingData.value = false;
    }, 10);
  }
})
const urls = [
  'src/assets/file/productCycle/1.jpg',
  'src/assets/file/productCycle/2.jpg',
  'src/assets/file/productCycle/3.jpg',
  'src/assets/file/productCycle/4.jpg',
  'src/assets/file/productCycle/5.jpg',
  'src/assets/file/productCycle/6.jpg'
];
const init = (async () => {
  let userQueryRequest =
      {
        userId:UserStore.id,
        current: current.value ? Number(current.value) : null,
        pageSize: pageSize.value ? Number(pageSize.value) : null
      };
  let res: ResponseData = await reqProductList(userQueryRequest);
  let data = res.data;
  if (res.data.records) {
    dataList.value = data.records;
    total.value = Number(data.total);
    current.value = Number(data.current);
    pageSize.value = Number(data.size);
  } else {
    ElMessage.error("请求数据为空...");
  }
})

onMounted(() => {
  init();
})
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.productStyle {
  margin-top: 5px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.custom-card {
  width: calc(100% / 4 - 10px);
  margin-right: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  min-height: 300px;
  max-height: 300px;
}

.all-search {
  padding-right: 20px;
  padding-top: -30px;
  display: flex;
  justify-content: flex-end;
}

.btn-background-color-search {
  background-color: #00a6ff;
  color: white;
}

.btn-background-color-reset {
  background-color: #29958d;
  color: white;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 95%;
}

.search-form .el-form-item {
  width: calc(100% / 4);
  padding-right: 10px;
  box-sizing: border-box;
}
</style>
